<!-- <template>
    <van-cell-group>
        <van-cell title="分类" />
        <van-list>
            <van-cell v-for="item in cateData" :key="item.id">
                <van-card
                    :num="item.products.length"
                    :price="'共 ' + item.products.length + ' 个商品'"
                    :desc="item.description"
                    :title="item.name"
                />
            </van-cell>
        </van-list>
    </van-cell-group>
</template>

<script setup>
import {ref, onMounted} from "vue"
import {AxiosResponse} from "axios"
import {getCateData} from "../../api"

const cateData = ref([]);

const getData = async () => {
    let res: AxiosResponse = await getCateData()
    console.log(res)
    if (res.status === 200) {
        cateData.value = res.data;
    }
}

onMounted(() => {
    getData()
})
</script> -->


<template>
  <div class="page-container">
    <van-nav-bar title="分类" fixed placeholder safe-area-inset-top />
    
    <div class="category-content">
      <van-sidebar v-model="activeCategory">
        <van-sidebar-item 
          v-for="category in categories" 
          :key="category.id" 
          :title="category.name"
        />
      </van-sidebar>
      
      <div class="category-detail">
        <div class="category-header">
          <h3>{{ currentCategory?.name }}</h3>
          <p>{{ currentCategory?.description }}</p>
        </div>
        
        <van-grid :column-num="3" :border="false" :gutter="10">
          <van-grid-item 
            v-for="product in currentCategory?.products" 
            :key="product.id"
            @click="viewProduct(product.id)"
          >
            <van-image 
              :src="`https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg`" 
              width="80" 
              height="80"
            />
            <p class="product-name">{{ product.name }}</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getCateData } from '../api'
import type { Category } from '../api/interface'

const activeCategory = ref(0)
const categories = ref<Category[]>([])

const currentCategory = computed(() => {
  return categories.value[activeCategory.value]
})

const getData = async () => {
  try {
    const res = await getCateData()
    if (res.status === 200) {
      categories.value = res.data
    }
  } catch (error) {
    console.error('获取分类数据失败:', error)
  }
}

const viewProduct = (id: number) => {
  // 实际项目中跳转到商品详情页
}

onMounted(() => {
  getData()
})
</script>

<style scoped>
.page-container {
  padding-bottom: 50px;
}

.category-content {
  display: flex;
  height: calc(100vh - 96px);
}

.van-sidebar {
  width: 80px;
  height: 100%;
  overflow-y: auto;
}

.category-detail {
  flex: 1;
  padding: 10px;
  height: 100%;
  overflow-y: auto;
}

.category-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.category-header h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.category-header p {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.product-name {
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>